<template>
  <div class="page-container">
    <el-carousel
      class="app-container"
      style="padding:30px 0"
      :interval="3000"
      type="card"
      height="500px"
      :autoplay="false"
    >
      <el-carousel-item>
        <img
          height="500px"
          src="http://tartansh.com/public/upload/1627556790037-1.jpg"
          alt=""
        />
      </el-carousel-item>
      <el-carousel-item>
        <img
          height="500px"
          src="http://tartansh.com/public/upload/1625645033918-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210707160245.jpg"
          alt=""
        />
      </el-carousel-item>
      <el-carousel-item>
        <img
          height="500px"
          src="http://tartansh.com/public/upload/1625539525717-8.png"
          alt=""
        />
      </el-carousel-item>
    </el-carousel>
    <div style="background-color:white;">
      <div
        class="app-container"
        style="display:flex;align-items:center;justify-content:space-between;overflow:hidden"
      >
        <h2 style="font-size:28px;color:#004E81;">{{$t("news")}}</h2>
        <div style="float:right;display:flex;">
          <input
            style="box-sizing: border-box;border:1px solid #cccccc;border-right:none;height:48px;width:160px"
            type="text"
          />
          <div
            style="color:#004E81;font-weight:600;display:inline-block;text-align:center;background:rgb(224,224,224);height:48px;line-height:48px;width:120px;cursor:pointer"
          >
            Search
          </div>
        </div>
      </div>
    </div>
    <!-- TODO: 适配移动端--隐藏图片或改变展示方式 -->
    <div
      class="tartan-container"
      style="background-color:white;height:380px;padding:33px 0 48px;box-sizing:border-box"
      :style="i == 1 && { 'margin-top': '0px' }"
      v-for="i in 5"
      :key="i"
    >
      <div
        class="case-item app-container"
        style="overflow:hidden;display:flex;"
      >
        <div
          style="flex:1 0 0;position:relative;padding:20px;margin-right:40px;background-image:linear-gradient(to right, rgb(223,226,232) 154px,white 100px)"
        >
          <h3 style="font-size:23px;color:#002E5B" class="news-title">
            达坦自研3D伽马成像系统获得业内好评
          </h3>
          <div
            class="news-time"
            style="font-size:13px;color:#333333;text-align:right;font-family:Helvetica"
          >
            2021-06-28
          </div>
          <div
            class="news-content"
            style="font-size: 13px;color:#333333;line-height: 21px;text-align:justify;margin-top:37px"
          >
            达坦能源科技3D伽马成像系统自2021年年初在业内推广使用以来，已经在多个区块使用并获得喜人成绩。通过达坦自主研发的软件，配合硬件使用，更准确直观的进行地质导向，大幅提高随钻测井和开采效率，获得客户的一致好评和赞扬…
          </div>
          <div
            class="read-all"
            style="color:#004E81;font-size:13px;font-weight:600;position:absolute;bottom:0;right:10px;cursor:pointer"
          >
            【阅读全部】
          </div>
        </div>
        <!-- TODO: img尺寸自适应 -->
        <div style="flex:1 0 0">
          <img
            width="100%"
            style="min-height:100%"
            src="../../../public/img/news_test_img_1.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="tartan-container">
      <div class="tartan-item app-container">
        <h2 class="title">
          更多新闻
        </h2>
        <p
          v-for="news in newsList"
          :key="news.messageId"
          style="display:flex;justify-content:space-between"
        >
          <router-link
            style="text-decoration:none"
            :to="`/news/${news.messageId}`"
          >
            <span style="color:#50565B;font-size:23px">{{ news.title }}</span>
          </router-link>
          <span style="font-size:19px;color:#919597">2021-06-29</span>
        </p>
        <p style="display:flex;justify-content:space-between">
          <span style="color:#50565B;font-size:23px"
            >达坦能源科技上海无锡团建活动圆满结束</span
          >
          <span style="font-size:19px;color:#919597">2021-06-29</span>
        </p>
        <p style="display:flex;justify-content:space-between">
          <span style="color:#50565B;font-size:23px"
            >达坦能源科技上海无锡团建活动圆满结束</span
          >
          <span style="font-size:19px;color:#919597">2021-06-29</span>
        </p>
        <p style="display:flex;justify-content:space-between">
          <span style="color:#50565B;font-size:23px"
            >达坦能源科技上海无锡团建活动圆满结束</span
          >
          <span style="font-size:19px;color:#919597">2021-06-29</span>
        </p>
        <div style="text-align:center;margin-top:30px">
          <el-pagination background layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "news",
  asyncData({ store, i18n }) {
    let language = i18n.locale === "en" ? 2 : 1;
    return store.dispatch("GET_NEWS_LIST", { language });
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["newsList"]),
  },
  methods: {},
};
</script>
<style></style>
<style>
.el-carousel__item--card.is-active {
  transform: translateX(27%) !important;
}
.el-carousel__item--card {
  width: 66%;
}
</style>
